<%--
  Created by IntelliJ IDEA.
  User: Win10
  Date: 2023/5/9
  Time: 0:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>query</title>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>

    <script src="${pageContext.request.contextPath}/jquery/jquery-2.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/jquery/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        //4.指定图表的配置项和数据
        var option = {
            title: {
                text: '用户通话信息统计',
            },
            tooltip: {},
            legend: {
                data: ['通话日期']
            },
            xAxis: {
                data: [
                    <c:forEach items="${calllogs}" var="calllog">
                        ${calllog.dateid},
                    </c:forEach>
                ]
            },
            yAxis: {},
            series: [{
                name: '通话时长',
                type: 'bar',
                data: [
                    <c:forEach items="${calllogs}" var="calllog">
                    ${calllog.sumduration},
                    </c:forEach>
                ]
            }]
        };
        // 将配置项设置给echarts实例对象
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
